<template>
  <div class="dashboard-container">
    <el-dialog :title="showTitle" :visible="showDialog" @close="btnCancel" >
    <el-form ref="addUser" :model="formData" :rules="rules" label-width="120px"  >
      <el-form-item label="用户名" prop="username">
        <el-input v-model.trim="formData.username" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="formData.email" style="width: 90%;" />
      </el-form-item>
      <el-form-item v-if="!this.formData.id" label="密码"  prop="password">
        <el-input

          v-model.trim="formData.password"
          style="width: 90%;"
         
        />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input v-model.trim="formData.role" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="权限组名称">
        <!-- <el-input
          v-model="formData.permission_group_id"
          style="width: 90%;"
        >
        </el-input> -->
        <!-- <el-select v-model="formData.permission_group_id" style="width: 90%;" placeholder="请选择">
    </el-select> -->
    <el-select v-model="formData.permission_group_id" style="width: 90%;" placeholder="请选择">
      <!-- <el-option
            v-for="item in title"
            :key="item.id"
            :label="item.value"
            :value="item.title"
          /> -->
           <el-option
            v-for="item in title"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
    </el-select>

        <!-- <el-dropdown :hide-on-click="false"> -->
  
<!-- </el-dropdown> -->
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formData.phone" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="介绍">
        <el-input style="width: 90%;" placeholder="Please input" />
       
      </el-form-item>
    </el-form>

    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
  </div>
</template>

<script>
import { addUsers,getPermissions,detailUser,editUsers } from '@/api/user'
const defaultItem = {
  username: '',
  email: '',
  role: '',
  permission_group_id: '',
  phone: '',
  password: '',
 
}
export default {
  name:'Add',
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      aa:'',
      formData: {
        ...defaultItem,
      },
   
      title: [],
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位',
            trigger: 'blur',
          },
        ],
      
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
      },
    }
  },
    computed: {
    showTitle() {
      return this.formData.id ? '编辑用户' : '新增用户'
    }
  },
  created() {
    this.getPermissions()
  },
  methods: {
   async getPermissions() {
    const data = await getPermissions()
    console.log(data.data);
  //   const arr=[]
  //  data.data.forEach(item => {
  //    arr.push(item.title)
  //  })
  //  console.log(arr);

    this.title = data.data
    // console.log(this.title);
    },
    // 获取详情方法
    async detailUser(id){
      const {data} =await detailUser(id)
   this.formData=data
   console.log(this.formData);
    },
    async btnOK() {
      try {
        await this.$refs.addUser.validate()
        if(this.formData.id){
          await editUsers(this.formData)
        }else{
            await addUsers(this.formData) 
        }
        console.log(this.formData);
      //  await addUsers(this.formData) //新增用户
        this.$emit('fff')
        this.$message.success('操作成功')
        this.$parent.showDialog = false
      } catch (err) {
        console.log(err)
      }
    },
    btnCancel() {
      this.formData = {
        ...defaultItem,
      }
      this.$refs.addUser.resetFields() //重置校验结果
      this.$parent.showDialog = false
    },
  },
}
</script>

<style scoped lang='scss'>
.dashboard-container {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      margin-left: 20px;
      // .el-form-item__label {
      //   width: 230px !important;
      // }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}

</style>
